<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>滚动条样式</title>
    <style>

        *{
            scrollbar-width: thin;/*火狐下这个属性好使，要想作用到所有元素，这个属性得写在*上*/
            scrollbar-color: #c6c6c6 #5da45d;/*火狐下这个属性好使，但是注意属性值必须得是两个颜色*/
        }

        .box {
            background: lemonchiffon;
            width: 500px;
            height: 300px;
            overflow: auto;


            
        }

        .inner {
            width: 100px;
            height: 1000px;
            background: hotpink;
            border-radius: 2px;
        }

        .long{
            width: 600px;
            height: 100px;
            background-color: lightblue;
        }

        .box1{
        }

        .box2::-webkit-scrollbar {
            background-color:#e7e8ed;
            width:8px;      /*横向滚动条*/
            height:8px;     /*纵向滚动条*/
        }
        .box2::-webkit-scrollbar-thumb{
            background-color: #b5b9ca;
            border:1px solid #e7e8ed;
            border-radius:2px;
        }

        .box2{
            background-color: cadetblue;

        }


        .box3{
            scrollbar-face-color: #e7e8ed;
            scrollbar-color: red;
            scrollbar-track-color: #b5b9ca;
        }
        
    </style>
</head>

<body>

    <div class="box box1">
        <div class="inner">火狐</div>
        <div class="long"></div>
    </div>

    <div class="box box2">
        <div class="inner">-webkit-</div>
        <div class="long"></div>
    </div>


    <div class="box box3">
        <div class="inner">IE</div>
        <div class="long"></div>
    </div>

</body>

</html>